<template>
    <view>
        <u-navbar title="多多热搜" :autoBack="true" :placeholder="true">
        </u-navbar>
        <view class="list">
            <view class="headerBox">
                <view class="headerImg"></view>
            </view>
            <view class="item" v-for="item in hotBookList" :key="item.id" @click="goBookDetails(item)">
                <view class="ranking">{{ item.top }}</view>
                <image class="leftImg" :src="item.coverImage"></image>
                <view class="middle">
                    <view class="bookTitle">《{{ item.bookTitle }}》</view>
                    <view class="author">作者:{{ item.author }}</view>
                </view>
                <view class="searchNum">
                    <view class="num" :class="{ top1: item.top == 1, top2: item.top == 2, top3: item.top == 3, }">{{
                            item.views
                    }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    computed: {
        ...mapGetters(['hotBookList'])
    },
    data() {
        return {

        }
    },
    methods: {
        goBookDetails(book) {
            // console.log(book)
            this.$store.dispatch('getBookDetail',book.id).then(res=>{
                if(res=='success'){
                    this.$Router.push({
                        name:'detail'
                    })
                }
            })
        }
    }

}
</script>

<style lang="scss">
.list {

    .headerBox {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e5e5e5;

        .headerImg {
            margin-top: 0.5rem;
            width: 70%;
            height: 12rem;
            background-image: url('@/static/images/hotList2.png');
            background-size: cover;
            background-repeat: no-repeat;
        }
    }

    .item {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid #e5e5e5;
        // justify-content: left;

        .ranking {
            width: 0.5rem;
            height: 0.5rem;
            color: #777;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            font-size: 1rem;
            text-align: center;
            margin-right: 1rem;
            margin-left: 1rem;
        }

        .leftImg {
            width: 4rem;
            height: 5rem;
            border-radius: 0.5rem;
            margin-right: 0.5rem;
        }

        .middle {
            width: 14rem;

            .bookTitle {
                font-size: 1.2rem;
                font-weight: bold;
                font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
                color: #333;
                margin-bottom: 0.5rem;
            }

            .author {
                font-size: 0.8rem;
                color: #999;
                font-weight: bold;
                font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

            }
        }

        .searchNum {
            position: absolute;
            right: 1rem;

            .num {
                font-size: 1rem;
                font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
                color: #ccc;
            }

            .top1 {
                color: #ff4d4f;
            }

            .top2 {
                color: #ffa500;
            }

            .top3 {
                color: #ffeb3b;
            }
        }
    }
}
</style>